<template>
  <div class="articleList">
     <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
          <el-breadcrumb-item>文章列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-table :data="tableData" style="width: 100%;margin-top:50px">
     	 <el-table-column label="标题"  width="300px" >
     	 	 <template slot-scope="scope">
     	 	 	 {{ scope.row.Article_title }}
     	 	 </template>
     	 </el-table-column>
     	 <el-table-column label="时间"  width="300px" >
     	 	 <template slot-scope="scope" :cell-style="line-height:70px">
     	 	 	 {{ scope.row.Article_createOn }}
     	 	 </template>
     	 </el-table-column>
     	 <el-table-column label="操作"   >
     	 	 <template slot-scope="scope">
     	 	 	 <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                 <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
     	 	 </template>
     	 </el-table-column>
     </el-table>
     <el-pagination layout="prev, pager, next" :total="totalPage" :page-size="5" @current-change="otherPage">
     </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
       tableData: [],
       totalPage:8,
    }
  },
  mounted(){
         this.articleListInit();
  },
  methods:{
  	async articleListInit(){
       let res = await this.axios.get('/api/admin/page/1');
       let number = await this.axios.get('/api/admin/getAllPage');
       this.tableData=res.data.message;
       this.totalPage=number.data.message;
       //console.log(number.data.message);
  	},
  	handleEdit(index, row) {
        this.$router.push({ name: 'articleDetail', params: { url: row.Article_title }})
    },
    handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await this.axios.post('/api/article/deleteArticleByTitle',{title:row.Article_title});
          if(res.data.status==1){
             this.$message({
                  type: 'success',
                  message: '删除成功!'
             });
             this.articleListInit();
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    async otherPage(page){
       let res = await this.axios.get('/api/admin/page/'+page);
       this.tableData=res.data.message;
    },
  }
}
</script>


<style lang="stylus" >
.articleList
	flex 1
	padding: 25px 70px;
	height: 30px;
	overflow-y: scroll;
	.el-table
		.cell
			line-height 70px
	.el-breadcrumb
		margin-bottom 22px
	.el-pagination
		float right
		margin-top 30px
	 
	
</style>
